<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <title>Runtime Canvas</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <!-- Makes your prototype1 chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link href="vendor/slick.js/slick/slick.css" rel="stylesheet">
    <link href="vendor/slick.js/slick/slick-theme.css" rel="stylesheet">

    <script src="app.js"></script>
    {{#ifProduction}}
      <link href="{{prefix}}/css/runtime{{theme}}.min.css" rel="stylesheet">
    {{else}}
      <link href="{{prefix}}/css/runtime.css?theme={{theme}}" rel="stylesheet">
    {{/ifProduction}}

    <!-- 工程CSS -->
    {{#each styles}}
      <link href="css/{{this}}" rel="stylesheet">
    {{/each}}

    {{#each extension}}
      <link href="extension/css/{{this}}" rel="stylesheet">
    {{/each}}


    <style>
      html, body {
        height: 100%;
      }

      .PageView {
        min-height: 100%;
      }
      /*已经放入设计器中的组件拖放放置高亮，不要设置高宽*/
      div.sortable-ghost {
          border: 1px #f8cc2e dashed;
          background: #fefaea;
      }
      /*从组件区拖放时不知道具体的高宽，必须预设*/
      li.sortable-ghost {
          width: 2px;
          height: 25px;
          border: 1px #f8cc2e dashed;
          background: #fefaea;
      }
      /*如果是拖到页面中，那么就设置为宽度100%*/
      .PageView >li.sortable-ghost {
          width: 100%;
          height: 25px;
          border: 1px #f8cc2e dashed;
          background: #fefaea;
      }
      /*直接拖入到设计器页面时隐藏掉文字*/
      li.sortable-ghost span {
        display: none;
      }
      /*对于拖入底板中的底板，默认给宽度*/
      div.BaseplateView div.BaseplateView {
        width: 100%;
      }

      .content.ui-sortable-disabled {
        background: gray;
      }

      /*min-height: 30px;*/
      .component-handle-view {
        /*让删除按钮能够相对于自己作绝对定位*/
        position: relative;
        /* not working ?*/
        box-sizing: border-box;
        /* 由于hover时会显示border，这里使用透明border，保持整体size，防止跳动*/
        border: 1px solid transparent;

      }
      .component-handle-view[data-type="BaseplateView"] {
        width: 100%;
      }
      .component-handle-view[data-type="ListItemView"] {
        width: 100%;
      }

      .component-handle-view .del {
        position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer;
        visibility: hidden;
        color: #f75a56;
        z-index: 10;
      }

      /*
      border: 1px dashed #f75a56;
      visibility: visible;
      * 悬浮时
      */

      /*
      * 选择（样式跟悬浮时一样）
      */
      [data-type].selected {
        border: 1px dashed #aaa9a3;
      }

      [data-type].selected >.del {
        visibility: visible;
      }

      .component-sort-placeholder {
        background: rgb(190, 204, 219);
        height: 50px;
      }
    </style>

  </head>
  <body>
  </body>
</html>
